<template>
	<Echart id="left1Category" :options="option" />
</template>

<script>
export default {
	name: 'PieRingChart',
	data() {
		return {
			option: {}
		};
	},
	props: {
		seriesDataList: {
			type: Array,
			default: () => []
		},
		unit: {
			type: String,
			default: '亩'
		},
		fontSize:{
			type: Array,
			default: () => [30, 40, 40] //默认 name、value、percent 字体大小
		},
		itemGap:{
			type: Number,
			default: 60
		},
		colorList: {
			type: Array,
			default: () => ['#0198F3', '#F7931A', '#00CE7D', '#884FFC'] //默认颜色列表
		}
	},
	methods: {
		initOption() {
			this.option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {					
					orient: 'vertical',
					top: 'center',
					right: '5%',
					itemHeight: 16,
					itemGap: this.itemGap,
					icon: 'roundRect',
					textStyle: {
						color: 'inherit',
						rich: {
							a: {
								width: 100,
								fontSize: this.fontSize[0],								
							},
							b: {
					  	width: 220,
								fontSize: this.fontSize[1],		
								align: 'right'
					 	},
							c: {
							 width: 180,
								fontSize: this.fontSize[2],
								align: 'right'
							}
						},
						padding: [5, 0, 0, 10] //[上、右、下、左]
					},
					formatter: name => {
						const item = this.option.series[0].data.find(item => item.name === name);
						let value = item && item.value + this.unit;
						return `{a|${name}}{b|${value}}{c|${item.percent}}`;
					}
				},
				series: [
					{
						name: '产业分布',
						type: 'pie',
						left: '-60%',
						radius: ['50%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false
						},
						labelLine: {
							show: true
						},
						data: this.seriesDataList,
						color: this.colorList
					}
				]
			};
		}
	}
};
</script>
<style lang="scss" scoped></style>
